<template>
	<view class="reset-container df fdc">
		<text class="reset-title">重置密码</text>
		<text class="reset-mention">填写信息重设密码</text>
		<view class="ipt-container">
			<input v-model="account" @focus="ipt_focus" @blur="blur_ipt" :class="active_class" placeholder="请输入账号" class="info-ipt mt40" type="text" />
			<img @click="account = ''" v-show="account" class="icon-ipt" src="../../static/imgs/close.png" alt="" />
		</view>
		<button :class="reset_btn" class="reset-btn">获取验证码</button>
	</view>
</template>

<script setup>
	import { ref,watch } from 'vue';
	
	const active_class = ref('')
	const reset_btn = ref('')
	const account = ref('')
	
	const ipt_focus = ()=>{
		active_class.value = 'active'
	}
	const blur_ipt = ()=>{
		active_class.value = ''
	}
	watch(()=>account.value,(newVal)=>{
		if(newVal){
			reset_btn.value = 'opc'
		}else{
			reset_btn.value = ''
		}
	},{deep:true})
</script>

<style lang="scss">
.info-ipt{
	height: 80rpx;
}
.reset-container{
	padding: 40rpx 48rpx;
}
.reset-title{
	font-size: 48rpx;
	font-weight: 500;
	line-height: 56rpx;
}
.reset-mention{
	font-size: 28rpx;
	color: #AAB1B7;
	font-weight: 400;
	line-height: 52rpx;
}
.info-ipt{
	box-shadow: 0px 1px 0px 0px #F1F0F0;
	z-index: -1;
}
.active{
	box-shadow: 0px 1px 0px 0px #2D6CE8 !important;
}
.icon-ipt{
	width: 32rpx;
	height: 32rpx;
	position: absolute;
	right: 0;
	top: 64rpx;
	z-index: 999;
}
.ipt-container{
	position: relative;
	
}
.reset-btn{
	width: 100%;
	background: linear-gradient(270deg, #58C2F7 0%, #2D6CE8 100%);
	opacity: 0.5;
	font-size: 32rpx;
	font-weight: 500;
	color: #fff;
	height: 80rpx;
	margin-top: 160rpx;
	border-radius: 36rpx;
}
.opc{
	opacity: 1 !important;
}
</style>
